<template type="text/x-template" id="tpl-currency-form">
    <div :id="id" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <form method="post" class="form-horizontal" @submit.prevent="submit">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增/修改</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" class="form-control"/>
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.code}">
                            <label class="col-sm-2 control-label"> CODE</label>
                            <div class="col-sm-10">
                                <input v-model="live.currency.code"
                                       placeholder=""
                                       type="text"
                                       class="form-control"/>
                                <div class="text-danger" v-if="live.errors.code">{{ live.errors.code }}</div>
                            </div>
                        </div>
                        <div class="form-group required">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <div v-for="language in languages">
                                    <div class="input-group"
                                         :class="{'has-error' : live.errors.descriptions[language.languageCode].name}">
                                        <span class="input-group-addon">{{ language.languageCode }}</span>
                                        <input v-model="live.currency.descriptions[language.languageCode].name"
                                               type="text"
                                               placeholder="币种"
                                               class="form-control">
                                    </div>
                                    <div class="text-danger" v-if="live.errors.descriptions[language.languageCode].name">{{ live.errors.descriptions[language.languageCode].name }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group"
                             :class="{'has-error' : live.errors.symbolLeft}">
                            <label class="col-sm-2 control-label">左符号</label>
                            <div class="col-sm-10">
                                <input v-model="live.currency.symbolLeft"
                                       placeholder=""
                                       type="text"
                                       class="form-control"/>
                                <div class="text-danger" v-if="live.errors.symbolLeft">{{ live.errors.symbolLeft }}</div>
                            </div>
                        </div>
                        <div class="form-group"
                             :class="{'has-error' : live.errors.symbolRight}">
                            <label class="col-sm-2 control-label">右符号</label>
                            <div class="col-sm-10">
                                <input v-model="live.currency.symbolRight"
                                       placeholder=""
                                       type="text"
                                       class="form-control"/>
                                <div class="text-danger" v-if="live.errors.symbolRight">{{ live.errors.symbolRight }}</div>
                            </div>
                        </div>
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.decimalPlace}">
                            <label class="col-sm-2 control-label">小数位</label>
                            <div class="col-sm-10">
                                <input v-model="live.currency.decimalPlace"
                                       placeholder=""
                                       type="text"
                                       class="form-control"/>
                                <div class="text-danger" v-if="live.errors.decimalPlace">{{ live.errors.decimalPlace }}</div>
                            </div>
                        </div>
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.value}">
                            <label class="col-sm-2 control-label">汇率</label>
                            <div class="col-sm-10">
                                <input v-model="live.currency.value"
                                       placeholder=""
                                       type="text"
                                       class="form-control"/>
                                <div class="text-danger" v-if="live.errors.value">{{ live.errors.value }}</div>
                            </div>
                        </div>
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.sortOrder}">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input v-model="live.currency.sortOrder"
                                       placeholder=""
                                       type="text"
                                       class="form-control"/>
                                <div class="text-danger" v-if="live.errors.sortOrder">{{ live.errors.sortOrder }}</div>
                            </div>
                        </div>
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.status}">
                            <label class="col-sm-2 control-label"> 状态</label>
                            <div class="col-sm-10">
                                <select v-model="live.currency.status"
                                        class="form-control">
                                    <option value="1">#(i18n['text_enabled'])</option>
                                    <option value="0">#(i18n['text_disabled'])</option>
                                </select>
                                <div class="text-danger" v-if="live.errors.status">{{ live.errors.status }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" :disabled="submitting" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('currency-form', {
        template: document.getElementById('tpl-currency-form'),
        props: {
            row: {
                default: function () {
                    return {}
                }
            },
            visible: {
                default: false
            },
            id: {
                default: function () {
                    return 'm-' + Date.now()
                }
            }
        },
        watch: {
            visible: function (nV, oV) {
                this.show(nV)
            }
        },
        data: function () {
            return {
                jqM: null,
                submitting: false,
                languages: [],
                default: {
                    currency: {
                        currencyId: null,
                        code: '',
                        symbolLeft: '',
                        symbolRight: '',
                        decimalPlace: 4,
                        value: 1,
                        sortOrder: null,
                        status: 1,
                        descriptions: {}
                    },
                    errors: {
                        descriptions: {}
                    }
                },
                live: {
                    currency: {},
                    errors: {}
                }
            }
        },
        created: function () {
            this.init()
            this.clear()
        },
        mounted: function () {
            let self = this
            self.jqM = $(document.getElementById(self.id))
            self.jqM.modal({
                backdrop: 'static',
                keyboard: true,
                show: self.visible
            })
            self.jqM.on('hide.bs.modal', function (e) {
                self.$emit("toggled", false)
            })
            self.jqM.on('show.bs.modal', function (e) {
                self.$emit("toggled", true)
            })
        },
        methods: {
            init: function () {
                let self = this;
                self.live = _.cloneDeep(self.default)
                gateway.post('api/system/localisation/language/list').then(function (response) {
                    let languages = response.data.languages
                    _.forEach(languages, function (language) {
                        self.live.currency.descriptions[language.languageCode] = {name: ''}
                        self.live.errors.descriptions[language.languageCode] = {name: ''}
                        self.default.currency.descriptions[language.languageCode] = {name: ''}
                        self.default.errors.descriptions[language.languageCode] = {name: ''}
                    })
                    self.live.currency = _.cloneDeep(self.live.currency)
                    self.live.errors = _.cloneDeep(self.live.errors)
                    self.languages = _.cloneDeep(languages)
                })
            },
            show: function (v) {
                let self = this
                self.jqM.modal(v ? 'show' : 'hide')
                self.submitting = false
                self.live.currency = _.cloneDeep(self.default.currency)
                if (v && Object.keys(self.row).length > 0) {
                    gateway.post('api/system/localisation/currency/get', {currencyId: self.row.currencyId}).then(function (response) {
                        let data = response.data;
                        switch (data.code) {
                            case '00000':
                                self.live.currency = _.merge({}, self.live.currency, data.currency)
                                break;
                            default:
                                layer.alert(data.message, {icon: 0})
                        }
                    })
                }
            },
            submit: function () {
                let self = this
                self.submitting = true
                self.clear()
                let i = layer.load(2)
                gateway.post('api/system/localisation/currency/saveOrUpdate', self.live.currency).then(function (response) {
                    let data = response.data;
                    self.live.errors = _.merge({}, self.live.errors, data.errors || {});
                    switch (data.code) {
                        case '00000':
                            self.live.currency.currencyId = data.currencyId
                            self.$emit("success", data)
                            self.show(false)
                            layer.alert(data.message, {icon: 1})
                            break;
                    }
                }).finally(() => {
                    layer.close(i)
                    self.submitting = false;
                })
            },
            clear: function () {
                this.live.errors = _.cloneDeep(this.default.errors)
            }
        }
    })
})
</script>